<!-- 外链视频组件:填写外链的视频地址,填写视频地址后，会校验视频是否可以播放 -->
<template>
    <section class="box">
      <el-input :model-value="modelValue" @change="handleChange" placeholder="请填写视频地址" ></el-input>
      <video v-if="path" :src="path" controls @error="handleError"></video>
    </section>
  </template>
<script setup lang="ts">
  import { ref,defineEmits,defineProps } from "vue";
  
  // 可以接受一个视频地址作为参数
  defineProps({
    modelValue: {
        type: String,
        required: true
    }
  });

  const emits = defineEmits(["update:modelValue"]);

  const path = ref("");

  /**
   * 绑定change事件，避免重复绑定path的值，让video不断刷新
   * @param value 
   */
  const handleChange = (value:string) => {
    path.value = value;
  };

  /**
   * 当视频加载出错时，当前组件的值为null
   */
  const handleError = () => {
    emits("update:modelValue",null);
  };
  
  </script>
    
  <style scoped lang="scss">
  .box {
    width: 100%;
  }
  
  .el-tabs {
    width: 100%;
  }
  
  .video-box {
    .video {
      max-width: 100%;
    }
  }
  </style>